<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>答题界面 - OJ系统</title>
    <!-- 代码编辑ace.js   远程  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"
        charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript"
        charset="utf-8"></script>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        .header {
            width: 100%;
            height: 50px;
            background-color: #8a60d9;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            margin-left: 160px;
            font-size: 31px;
            cursor: pointer;
        }

        .nav-links {
            margin-left: -200px;
            display: flex;
            flex-grow: 0.3;
        }

        .header a {
            display: inline-block;
            color: white;
            text-decoration: none;
            font-size: large;
            line-height: 50px;
            text-align: center;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0 6px;
        }

        .header a:hover {
            background-color: #f5f5f5;
            color: rgb(20, 19, 19);
        }

        .main {
            padding: 20px;
        }

        .section {
            margin-bottom: 10px;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .section h2 {
            margin-top: 0;
            color: #8a60d9;
        }

        .section ul {
            list-style-type: none;
            padding: 0;
        }

        .section li {
            margin-bottom: 5px;
        }

        .section li:before {
            content: "•";
            color: #8a60d9;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
        }

        .nav1 {
            display: flex;
            align-items: center;
            margin-right: 160px;
        }

        .search {
            position: relative;
        }

        .js-input {
            width: 180px;
            height: 30px;
            line-height: 40px;
            font-size: 14px;
            padding: 0 15px;
            border: 1px solid #ccc;
            border-radius: 20px;
            outline: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .btn {
            height: 40px;
            border-radius: 20px;
            padding: 0 20px;
            background-color: #8a60d9;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #6f42c1;
        }

        .login-btn {
            height: 40px;
            border-radius: 20px;
            padding: 0 20px;
            background-color: #8a60d9;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
            font-size: 14px;
            display: flex;
            align-items: center;
        }

        .login-btn:hover {
            background-color: #6f42c1;
        }

        .login-btn a:hover {
            background-color: transparent;
            color: white;
        }

        /* 答题.html 样式 */
        .container {
            display: flex;
            gap: 0;
            width: 100%;
            margin: 0 auto;
            height: calc(100vh - 115px);
        }

        .problem-section {
            flex: 1;
            background: white;
            padding: 20px;
            border-radius: 8px 0 0 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow: auto;
            height: 100%;
            min-width: 30%;
            transition: flex 0.1s ease;
        }

        .problem-section pre {
            white-space: pre-wrap;
            word-wrap: break-word;
            font-family: Arial, sans-serif;
            margin: 0;
            line-height: 1.5;
        }

        .resizer {
            width: 10px;
            cursor: col-resize;
            height: 100%;
            border-radius: 2px;
        }

        .resizer:hover {
            background-color: #bebebe;
        }

        .code-section {
            flex: 1;
            min-width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
            transition: flex 0.1s ease;
            margin: 0;
            padding: 0;
        }

        .code-editor-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
            margin: 0;
            padding: 0;
        }

        .code-editor {
            flex: 1;
            width: 100%;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: vertical;
            min-height: 300px;
            margin: 0;
            padding: 0;
        }

        .submit-btn {
            background-color: #4CAF50;
            color: white;
            padding: 8px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            width: 90px;
            margin-left: auto;
        }

        .submit-btn:hover {
            background-color: #45a049;
        }

        .test-results-container {
            background: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            overflow: auto;
            margin: 0;
        }

        .test-results{
            margin-left: 20px;
        }

        .test-case {
            border-radius: 4px;
        }

        .toolbar{
            width: 100%;
            height: 50px;
            border-bottom: 2px solid #e1e1e1;
            display: flex;          /* 添加 Flex 布局 */
            align-items: center;    /* 垂直居中 */
        }

        .passed {
            background-color: #dff0d8;
            border: 1px solid #d6e9c6;
        }

        .failed {
            background-color: #f2dede;
            border: 1px solid #ebccd1;
        }

        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            width: 100%;
            bottom: 0;
        }

        #stderr {
            color: rgb(234, 14, 7);
        }

        #stdout {
            color: rgb(50, 202, 153);
        }
    </style>
</head>

<body>
    <!-- 答题界面.html 导航栏 -->
    <div class="header">
        <h1 onclick="window.location.href='/'">牛客网</h1>
        <div class="nav-links">
            <a href="/">首页</a>
            <a href="/all_questions">题库</a>
            <a href="/">竞赛</a>
            <a href="/">求职</a>
            <a href="/">社区</a>
            <a href="/">学习</a>
        </div>
        <div class="nav1">
            <!-- 搜索 -->
            <form class="form-inline my-2 my-lg-0" method="get" th:action="@{/search}">
                <input class="js-input" type="search" aria-label="Search" name="keyword" th:value="${keyword}" />
                <button class="btn" type="submit">搜索</button>
            </form>
            <button class="login-btn">
                <a href="/">登录/注册</a>
            </button>
        </div>
    </div>

    <!-- 答题.html 除导航栏部分 -->
    <div class="main">
        <div class="container">
            <!-- 题目描述区域 -->
            <div class="problem-section">
                <p><span id="number">{{number}}</span>.{{title}}</p>
                <p>{{difficulty}}</p>
                <pre>{{desc}}</pre>
            </div>

            <!-- 分隔条 -->
            <div class="resizer" id="resizer"></div>

            <!-- 代码编辑区域 -->
            <div class="code-section">
                <select id="language" style="margin-bottom: 5px;">
                    <option value="cpp">C++</option>
                    <option value="python">Python</option>
                    <option value="java">Java</option>
                </select>

                <div class="code-editor-container">
                    <pre id="code" class="code-editor"><textarea class="ace_text-input">{{code}}</textarea></pre>
                </div>

                <!-- 测试结果展示 -->
                <div class="test-results-container" id="results">
                    <div class="toolbar">
                        <button class="submit-btn" onclick="submitCode()">提交代码</button>
                    </div>
                    <div class="test-results">
                        <h3>测试结果</h3>
                        <div id="result-content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 答题界面.html 底部信息 -->
    <div class="footer">版权所有 © 牛客网</div>

    <script>
        // 声明 editor 变量
        let editor;
        //初始化对象
        editor = ace.edit("code");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/c_cpp");
        // 字体大小
        editor.setFontSize(14);
        // 设置默认制表符的大小:
        editor.getSession().setTabSize(4);
        editor.setReadOnly(false);
        // 启用提示菜单
        ace.require("ace/ext/language_tools");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });

        // 实现可拖动分隔条功能
        const resizer = document.getElementById('resizer');
        const problemSection = document.querySelector('.problem-section');
        const codeSection = document.querySelector('.code-section');
        const container = document.querySelector('.container');

        // 鼠标按下事件
        resizer.addEventListener('mousedown', function (e) {
            e.preventDefault();

            // 获取容器总宽度
            const containerWidth = container.getBoundingClientRect().width;
            // 获取初始比例
            const startProblemWidth = problemSection.getBoundingClientRect().width;
            const startCodeWidth = codeSection.getBoundingClientRect().width;
            const startX = e.clientX;

            // 鼠标移动事件
            function onMouseMove(e) {
                // 计算移动距离
                const dx = e.clientX - startX;
                // 计算新的宽度
                let newProblemWidth = startProblemWidth + dx;
                let newCodeWidth = startCodeWidth - dx;

                // 最小宽度限制
                const minWidth = 300;
                if (newProblemWidth < minWidth) {
                    newProblemWidth = minWidth;
                    newCodeWidth = containerWidth - minWidth - resizer.offsetWidth;
                }
                if (newCodeWidth < minWidth) {
                    newCodeWidth = minWidth;
                    newProblemWidth = containerWidth - minWidth - resizer.offsetWidth;
                }

                // 计算比例
                const problemRatio = newProblemWidth / containerWidth;
                const codeRatio = newCodeWidth / containerWidth;

                // 应用比例
                problemSection.style.flex = `${problemRatio}`;
                codeSection.style.flex = `${codeRatio}`;
            }

            // 鼠标释放事件
            function onMouseUp() {
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
                document.body.style.cursor = '';
            }

            // 添加事件监听器
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
            document.body.style.cursor = 'col-resize';
        });

        function submitCode() {
            // 收集当前页面的有关数据
            var code = editor.getSession().getValue();
            var language = document.getElementById('language').value;
            var number = $(".main .container .problem-section p #number").text();
            
            // 构建请求url
            var judge_url = "/judge/" + number;
            // 构建json，通过ajax向后台发起基于http的json请求
            $.ajax({
                method: 'Post',
                url: judge_url,
                dataType: 'json',
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify({
                    'code': code,
                    'input': ''
                }),
                success: function (data) {
                    //成功得到结果
                    console.log(data);
                    // 展示结果
                    displayResults(data);
                }
            });
        }

        function displayResults(results) {
            const result_content = $(".main .container .code-section .test-results-container .test-results #result-content");
            result_content.empty();

            var _status = results.status;
            var _reason = results.reason;

            var reason_lable = $("<p>", {
                text: _reason
            });
            reason_lable.appendTo(result_content);

            // 编译成功
            if (_status == 0) {
                var _stderr = results.stderr;
                var _stdout = results.stdout;

                var stderr_lable = $("<pre>", {
                    text: _stderr,
                    id: "stderr"
                });
                var stdout_lable = $("<pre>", {
                    text: _stdout,
                    id: "stdout"
                });

                stderr_lable.appendTo(result_content);
                stdout_lable.appendTo(result_content);
            }
        }
    </script>
</body>

</html>    